<template>
  <div style="height: 100%">
    <el-container style="height: 100%">
      <!-- Sidebar -->
      <el-aside
        :width="sideWidth + 'px'"
        style="background-color: var(--bg-1); height: 100%"
      >
        <Aside :is-collapse="isCollapse" />
      </el-aside>

      <el-container>
        <!-- Header -->
        <el-header
          style="
            border-bottom: 1px solid #ccc;
            background-color: var(--header-nav);
            height: 80px;
          "
        >
          <Header
            :collapse-icon="collapseIcon"
            :collapse-title="collapseTitle"
            @collapse="handleCollapse"
            :user="user"
          />
        </el-header>
        <!-- Main Content -->
        <el-main
          :class="{ bk: $route.path == '/manage/home' }"
          :style="{
            backgroundImage: `url(${imgUrl})`,
            backgroundSize: '100% 100%',
            backgroundRepeat: 'no-repeat',
          }"
        >
          <router-view @refresh="getUser" />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import Aside from "../../components/Aside.vue";
import Header from "../../components/Header.vue";

const store = useStore();
const route = useRoute();

// Reactive data
const user = ref<any>({});
const isCollapse = ref<boolean>(false);
const sideWidth = ref<number>(250);
const collapseIcon = ref<string>("el-icon-s-fold");
const collapseTitle = ref<string>("收缩");
const imgUrl = ref<any>(store.state.configData.imgUrl);

// Methods
const handleCollapse = () => {
  isCollapse.value = !isCollapse.value;
  if (isCollapse.value) {
    sideWidth.value = 64;
    collapseIcon.value = "el-icon-s-unfold";
    collapseTitle.value = "展开";
  } else {
    sideWidth.value = 250;
    collapseIcon.value = "el-icon-s-fold";
    collapseTitle.value = "收缩";
  }
};

const getUser = () => {
  const username = localStorage.getItem("user")
    ? JSON.parse(localStorage.getItem("user") || "{}").username
    : "";
  if (username) {
    store.state.request.get("/userinfo/" + username).then((res: any) => {
      user.value = res.data;
    });
  }
};

// Lifecycle
onMounted(() => {
  getUser();
});
</script>

<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 80px;
}

.el-aside {
  color: #333;
}

.bk {
  width: 100%;
  background: url("@/resource/img/back.jpg") center center no-repeat;
  background-size: 100% 100%;
}
</style>
